
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>

<head>
<link rel="StyleSheet" href="css/jpetstore.css" type="text/css"
	media="screen" />

<meta name="generator"
	content="HTML Tidy for Linux/x86 (vers 1st November 2002), see www.w3.org" />
<title>PetStore</title>
<meta content="text/html; charset=windows-1252"
	http-equiv="Content-Type" />
<meta http-equiv="Cache-Control" content="max-age=0" />
<meta http-equiv="Cache-Control" content="no-cache" />
<meta http-equiv="expires" content="0" />
<meta http-equiv="Expires" content="Tue, 01 Jan 1980 1:00:00 GMT" />
<meta http-equiv="Pragma" content="no-cache" />
	<script type="text/javascript" src="js/jquery-3.6.0.min.js"></script>
	<script type="text/javascript" src="js/jquery-ui.min.js"></script>
	<script type="text/javascript" src="css/jquery-ui.min.css"></script>
	<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.5.1.min.js"></script>
</head>

<body>


	<div id="Header"  >

		<div id="Logo"    >
			<div id="LogoContent"   >
				<a href="main"  ><img src="images/logo-topbar.gif" alt="中国"/></a>
			</div>
		</div>

		<div id="Menu"   >
			<div id="MenuContent"   >
				<a href="viewCart?account=${sessionScope.account}&username=${sessionScope.username}"><img align="middle" name="img_cart" src="images/cart.gif" /></a> <img align="middle" src="images/separator.gif" />
				<c:if test="${sessionScope.username == null}">
					<a href="ViewSignonForm">Sign In</a>
				</c:if>
				<c:if test="${sessionScope.username != null}">
					<a href="SignOut">Sign Out</a>
					<!---signOff-->
				</c:if>

				<!--分隔符-->
				<c:if test="${sessionScope.username != null}">
					<img align="middle" src="images/separator.gif" />
					<a href="ViewEditInformationForm?username=${sessionScope.username}">My Account</a>
				</c:if><img align="middle" src="images/separator.gif" />

				<c:if test="${sessionScope.username != null}">
<%--					<a href="ViewListOrder?username=${sessionScope.username}">My Orders</a>--%>
				</c:if>
				<c:if test="${sessionScope.username != null}">
					<img align="middle" src="images/separator.gif" />
				</c:if>
				<a href="Help">?</a>
			</div>
		</div>

<%--		<script>--%>
<%--			$(function(){--%>
<%--               $('#searchField').keyup(function (){--%>
<%--				   var content=$(this).value;--%>
<%--				   if(content=="")--%>
<%--				   {--%>
<%--					   return;--%>
<%--				   }--%>
<%--                  $.ajax({--%>
<%--					 type:"get",--%>
<%--					  url:"searchPet?keyword="+this.value,--%>
<%--					  success:function (data){--%>
<%--						 console.log("search  "+$(this).value);--%>
<%--                         console.log(data);--%>

<%--						  $( '#searchField' ).autocomplete({--%>
<%--								  minLength: 1,--%>
<%--								  maxlength: 10,--%>
<%--							      dataType:"json",--%>
<%--								  source: data,--%>
<%--							  })--%>
<%--								  .data( "ui-autocomplete" )._renderItem = function( ul, item ) {--%>
<%--								  return $( "<li>" )--%>
<%--										  .append( "<a style='font-size:12px;font-family: 微软雅黑;onclick='setSearch_onclick(this)' onmouseout='changeBackColor_out(this)' onmouseover='changeBackColor_over(this)'>" + item.name +"</a>" )--%>
<%--										 // .append("<a>"+item.description+"</a>")--%>
<%--										  .appendTo( ul );--%>
<%--							  };--%>
<%--					  }--%>
<%--				  });--%>
<%--			   });--%>
<%--			});--%>
<%--			//鼠标移动到内容上--%>
<%--			function changeBackColor_over(div){--%>
<%--				$(div).css("background-color","#CCCCCC");--%>
<%--			}--%>
<%--			//鼠标离开内容--%>
<%--			function changeBackColor_out(div){--%>
<%--				$(div).css("background-color","");--%>
<%--			}--%>
<%--			//将点击的内容放到搜索框--%>
<%--			function setSearch_onclick(div){--%>
<%--				$('#searchField').value(div.innerText);--%>
<%--				$('#searchBtn').trigger("click");--%>

<%--			}--%>
<%--		</script>--%>

		<script type="text/javascript">
			$(function () {
				$('#searchField').keyup(function () {
					var content=this.value;
					if(content=="")
					{
						$("#SearchProductContext").css("display","none");
						return;
					}
					var a=$("#searchField").offset().left;
					var b=$("#searchField").offset().top;
					var c=$("#searchField").offset().height;
					$.ajax({
						type: "GET",
						url: "searchPet?keyword=" + this.value,
						success: function (data) {
							console.log(data);
							var result = "";
							for (var i = 0; i < data.length; i++) {
								var item=data[i];
								result += "<div onclick='Search_onclick(this)' onmouseout='changeBgc_out(this)' " +
										"onmouseover='changeBgc_over(this)'class='link'>" +item.name + "</div>";
							}
							$("#SearchProductContext").html(result).css({"display": "block","left":a,"top":b+c});
						}
					});
				});


			});

			//鼠标移动到内容上
			function changeBgc_over(div) {
				$(div).css("background-color", "#CCCCCC");
			}

			//鼠标离开内容
			function changeBgc_out(div) {
				$(div).css("background-color", "");
			}

			//将点击的内容放到搜索框
			function Search_onclick(div) {
				$("#searchField").val(div.innerText);
				document.getElementById("searchBtn").click();
				$("#SearchProductContext").css("display", "none");
			}
		</script>

		<div id="SearchProductContext" style="background-color:white; border: 1px solid black;
        width:125px;position: absolute;top: 49px;left:1208px;display:none">
		</div>
		<div id="Search"   >
			<div id="SearchContent" >
				<form action="search" method="post">
					<input  autocomplete="off" id="searchField" type="text" name="keywords" size="14" />

					<input id="searchBtn" type="submit"
						name="searchProducts" value="Search"  class="button green" />

				</form>

		</div>
	</div>
		<div id="QuickLinks">
			<a href="viewCategory?categoryId=FISH">
				<img src="images/sm_fish.gif" /></a>
			<img src="images/separator.gif" />
			<a href="viewCategory?categoryId=DOGS">
				<img src="images/sm_dogs.gif" /></a>
			<img src="images/separator.gif" />
			<a href="viewCategory?categoryId=REPTILES">
				<img src="images/sm_reptiles.gif" /></a>
			<img src="images/separator.gif" />
			<a href="viewCategory?categoryId=CATS">
				<img src="images/sm_cats.gif" /></a>
			<img src="images/separator.gif" />
			<a href="viewCategory?categoryId=BIRDS">
				<img src="images/sm_birds.gif" /></a>
		</div>
	<div id="Content">
	<style type="text/css">
		#Menu,#Logo,#Search{
			background-color:			#F5FFFA;
		}
	</style>
	<style type="text/css">
		#QuickLinks{
			background-color:	#8FBC8F;
		}
	</style>
		<style type="text/css">

			table {
				padding: 0;
				margin: 0;
			}
			div.link {
				padding: 0;
				margin: 0;
				font: bold 14px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
				//color: #4f6b72;
				border-right: 1px solid #C1DAD7;
				border-bottom: 1px solid #C1DAD7;
				border-top: 1px solid #C1DAD7;
				letter-spacing: 2px;
				text-transform: uppercase;
				text-align: left;
				border-right: 1px solid #C1DAD7;
				border-bottom: 1px solid #C1DAD7;
				background: #8FBC8F;
				color: 	#F5FFFA;
			}

			caption {
				padding: 0 0 5px 0;
				width: 700px;
				font: italic 16px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
				text-align: right;
			}

			th {
				font: bold 16px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
				color: #4f6b72;
				border-right: 1px solid #C1DAD7;
				border-bottom: 1px solid #C1DAD7;
				border-top: 1px solid #C1DAD7;
				letter-spacing: 2px;
				text-transform: uppercase;
				text-align: left;
				padding: 6px 6px 6px 12px;
				background: #d5eaca no-repeat;
			}

			th.nobg {
				border-top: 0;
				border-left: 0;
				border-right: 1px solid #C1DAD7;
				background: none;
			}

			td {
				border-right: 1px solid #C1DAD7;
				border-bottom: 1px solid #C1DAD7;
				background: #8FBC8F;
				font-size:16px;
				padding: 6px 6px 6px 12px;
				color: 	#F5FFFA;
			}


			td.alt {
				background: #F5FAFA;
				color: #797268;
			}

			th.spec {
				border-left: 1px solid #C1DAD7;
				border-top: 0;
				background: #fff no-repeat;
				font: bold 10px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
			}

			th.specalt {
				border-left: 1px solid #C1DAD7;
				border-top: 0;
				background: #f5fafa no-repeat;
				font: bold 10px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
				color: #797268;
			}
		</style>
	<div id="Content" >